<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="c.css"> -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #0e6fd6;
            background-image: url(img/jpg.7.png), url(img/jpg.6.png);
            background-position: top, 80% 25%;
            background-repeat: no-repeat;
            background-size: 100%, 40%;
            background-attachment: fixed;

        }

        .box {
            width: 91%;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }

        a {
            text-decoration: none;
            color: #000;
        }

        li {
            list-style: none;
        }

        .xxl {
            position: relative;
            width: 100%;
            height: 10vw;
            overflow: hidden;
            margin-top: 3vw;
        }

        .xxl ul {
            position: absolute;
            left: 0;
            top: 0;
            width: 1000%;
        }

        .xxl ul li {
            float: left;
            text-align: center;
            margin-right: 6vw;
        }

        .xxl ul li img {
            width: 5vw;
            border-radius: 50%;

        }

        .xxl ul li span {
            vertical-align: top;
            margin: auto 1vw;
            font-size: 3.5vw;
            color: rgb(224, 219, 219);
        }

        .top {
            display: flex;
            justify-content: space-around;
            margin: 0 2% 2% 2%;
        }

        .top .left {
            width: 55%;
        }

        .top .right {
            position: relative;
            width: 50%;
            height: 50vw;
            overflow: hidden;
        }

        .top .right ul {
            position: absolute;
            left: 0;
            width: 400%;
            transition: none;
            transform: translateX(0);
            z-index: -9;
        }

        .top .right ul li {
            width: 25%;
            float: left;
            /* margin-right: 3vw; */
        }

        .top .right ul li img {
            width: 100%;
        }

        .top .left img {
            width: 100%;
        }

        .top .left .span {
            display: flex;
            margin-top: 2em;

        }

        .top .left .span .zi {
            background-color: #fff;
            border-radius: 3em;
            font-size: 3vw;
            color: #3954dd;
            line-height: 3em;
            padding: 0 1em;
        }

        .top .right img {
            width: 100%;
            font-size: 100%;
        }

        .center-top {
            position: relative;
            top: -13.2vw;
            background-color: #fff;
            border-radius: 1.7em;
        }

        .center-top .img-one {
            position: absolute;
            bottom: -8vw;
            left: 3vw;
        }

        .center-top .img-two {
            position: absolute;
            bottom: -8vw;
            right: 3vw;
        }

        .center-top .img-one img,
        .center-top .img-two img {
            width: 3.7vw;
        }

        .center-top .xianshi {
            background-color: #FFEFD4;
            line-height: 2.5em;
            text-align: center;
            font-size: 4vw;
            border-radius: .6em .6em 0 0;
        }

        .center-top .xianshi .one {
            color: #999;
            text-decoration: line-through;
        }

        .center-top .xianshi .two,
        .numb {
            color: #FF7930;
        }

        .center-top .input {
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 15vw;
            margin: 2em 2em 0 2em;
            border: 2px solid rgb(187, 184, 184);
            border-radius: .5em;

        }

        .center-top .input .input-main {
            position: relative;
            padding: 1em 2em;
            /* margin-bottom: 2em; */


        }

        .center-top .input .input-main span {
            font-size: 3vw;
        }

        .center-top .input .input-main input {
            position: absolute;
            top: 1em;
            right: 1em;
            font-size: 3vw;
            color: rgb(160, 158, 158);
            border-width: 0;
            width: 69%;
            text-align: right;
        }

        .center-top .input .input-main input:focus {
            color: blue;
            outline: none;
        }

        .center-top .lingqus {
            position: absolute;
            left: 14vw;
            bottom: 26vw;
            width: 63vw;
            height: 2vw;
            cursor: pointer;
        }

        .center-top .lingqu {
            display: flex;
            justify-content: center;
            align-items: center;
            transition: none;
            line-height: 20vw;
            font-size: 4vw;
            width: 62vw;
            height: 17vw;
            transform: scale(1.05, 1.05);
            background-color: #FF7930;
            border-radius: 10vw;
            color: #fff;
        }

        .center-top .xingxi {
            /* display: flex;
            align-items: center;
            justify-content: center; */
            position: relative;
            left: 0;
            bottom: 0;

            margin-top: 28vw;
            padding-bottom: 2em;
        }

        .tt img {
            position: absolute;
            left: 16vw;
            bottom: 3.2vw;
        }

        .smk {
            overflow: hidden;
            position: absolute;
            left: 21.3vw;
            bottom: 2.4vw;
            height: 5vw;
            /* background-color: #FF7930; */
        }

        .smk ul {
            transition: none;
            transform: translateY(0%);
        }

        .smk ul li {
            height: 5vw;
        }

        .center-top .xingxi img {
            width: 5%;
        }

        .center-top .xingxi span {
            font-size: 3vw;
            color: #777;
        }

        .center .center-bottom {
            margin-top: -9vw;
            border-radius: .5em;
            background-color: #fff;
        }

        .center .center-bottom .top-floot {
            display: flex;
            justify-content: center;
        }

        .center .center-bottom img {
            margin: 4.5em 1.5em 1.5em 1.5em;
            width: 78%;
        }

        .center .bottom span {
            display: inline-block;
            background-color: #2b4be9;
            color: #fff;
            width: 2.2em;
            margin-right: .5em;
            font-size: 3vw;
            text-align: center;
            line-height: 2.2em;
            height: 2.2em;
            border-radius: 1.5em;
        }

        .center .bottom p {
            display: inline;
            font-size: 3.2vw;
        }

        .bottom .bag {
            width: 80%;
            margin: .1em auto;
        }

        .bottom .bag .min {
            display: flex;
            justify-content: space-between;
            /* margin-bottom: 2vw; */
        }

        .bottom .bag .min .kk {
            margin: 1.2em 0;
            font-size: 2vw;
            color: #777;
        }

        .floot {
            /* display: flex; */
            position: relative;
            background-color: #fff;
            margin-top: 4vw;
            border-radius: .7em;
        }

        .floot .lj-1 {
            position: absolute;
            top: -9.4vw;
            left: 3vw;
        }

        .floot .lj-1 img,
        .floot .lj-2 img {
            width: 3.7vw;
        }

        .floot .lj-2 {
            position: absolute;
            top: -9.4vw;
            right: 3vw;
        }

        .floot .left {}

        .floot .left img {
            margin: 10vw 2vw 19vw 3vw;
            width: 4vw;
        }

        .floot .right {}

        .floot .right .p,
        .q,
        .j,
        .m,
        .n {
            position: absolute;
            padding: 1em 1.5em;
            background: url(img/jpg.9.png) no-repeat;
            background-size: 18vw 13vw;
            font-size: 3vw;
            color: #fff;
            top: 5vw;
            left: 16vw;
            text-align: center;
        }

        .floot .right .q {
            left: 40vw;
            top: 4.2vw;
            padding: 1em .6em;
        }

        .floot .right .j {
            left: 64vw;
            padding: .3em .6em;
        }

        .floot .right .m {
            top: 21vw;
            left: 25vw;
            padding: .9em 1em;
        }

        .floot .right .n {
            top: 21vw;
            left: 52vw;
            padding: .9em 1em;
        }

        .tiaokuan {
            position: relative;
            /* text-align: center; */
            /* padding-bottom: 4vw; */
            color: #FF7930;
            font-size: 3vw;
            font-weight: 600;
        }

        .tiaokuan span {
            position: absolute;
            bottom: 5vw;
            left: 19%;

        }

        .floot-min {
            text-align: center;
            margin: 3vw auto;
        }

        .floot-min img {

            width: 50vw;
        }

        @media screen and (min-width: 316px) and (max-width: 421px) {
            .center-top .input .input-main input {
                top: 6vw;
                width: 51%;
            }

            .center .center-bottom img {
                margin: 6vw 6vw;
            }
        }

        @media screen and (max-width: 315px) {
            .top .left .span .zi {
                font-size: 2px;
                border-radius: 8px;
                font-size: .1px;
                line-height: 2;
            }

            .center-top .input .input-main input {
                top: 2.5em;
                width: 46%;
            }

            .center-top .input .input-main {
                padding: 1em .5em;
            }
           
        }

       

        

        .timer {
            display: none;
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 70%;
            /* padding: 2vw; */
            z-index: 999;
            background-color: #fff;
            /* background: url(img/jpg.16.png);
            background-size: 100%; */
        }

        .tm {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 30%;
            background: rgba(0, 0, 0, .3);
        }

        .timer ul {
            display: flex;
            width: 75vw;
            height: 12vh;
            margin: 0 auto;
            /* padding: 0 2vw; */
            justify-content: space-around;

        }

        .timer ul li {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 50%;
            height: 10vh;
            margin-right: 2vw;

            background-color: #3694f8;
            border-radius: 2vw;
            box-shadow: 2px 2px 2px 2px rgb(201, 199, 199);
            font-size: 1.5vw;
            color: #fff;
            cursor: pointer;

        }

        .qd {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 2%;
            width: 41%;
            height: 15%;
            background-color: blueviolet;
            border-radius: 10vw;
            cursor: pointer;
        }

        .qd .qd-min {
            display: flex;
            width: 98%;
            height: 100%;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 3vw;
        }

        .wai {
            width: 80%;
            height: 30%;
        }

        .dhl-one {
            width: 100%;
            height: 25%;
            position: relative;
            top: 13%;
            /* background-color: #FF7930; */
        }

        .dhl-one span {
            position: absolute;
            left: 18%;
            bottom: 0%;
            font-size: 4.4vw;
            color: #777;
            cursor: pointer;
        }

        .dhl-one h6 {
            position: absolute;
            left: 61%;
            top: 0%;
            font-size: 3.3vw;
            transform: translateX(-50%);
        }

        .dhl-two {
            position: absolute;
            top: 13%;
            width: 100%;
            height: 14%;

            border-top: 1px solid rgb(214, 212, 212);
            border-bottom: 1px solid rgb(214, 212, 212);
            /* background-color: sandybrown; */
        }

        .dhl-three {
            /* margin-left: 20vw; */
        }

        .w-one {
            display: flex;
            justify-content: space-around;
        }

        .m-one {
            display: flex;
            flex-direction: column;
            align-items: center;
            /* margin-right: 15vw; */
            cursor: pointer;
        }

        .strong {
            font-weight: normal;
            font-size: 20%;
        }

        .di {
            width: 72%;
            height: 19px;
            border-bottom: 1vw solid transparent;
        }
        @media screen and (min-width: 252px) and (max-width: 540px) {
            .wai .dhl-one span {
                bottom: 42%;
            }
            .strong {
                font-size: 92%;
            }
            .qd {
                width: 40%;
                height: 11%;
                left: 49%;
                bottom: 5%;
                border-radius: 8vw;
            }
            .timer.dhl-one span {
                font-size: 6.4vw;
            }
           
        }
        @media screen and (min-width: 541px) and (max-width: 777px) {
            .strong {
                font-size: 100%;
            }
        }
        @media screen and (min-width: 778px) and (max-width: 940px) {
            .strong {
                font-size: 106%;
            }
            .qd {
                width: 38%;
            }
            .dhl-one h6 {
                top: -18%;

            }
        }
        @media screen and (min-width: 941px) and (max-width: 1070px) {
            .strong {
                font-size: 120%;
            }
            .dhl-one h6 {
                top: -44%;
            }
            .dhl-one span {
                bottom: -23%;
            }
            .di {
                height: 14px;
            }
            .qd {
                width: 35%;
            }
        }
        @media screen and (min-width: 1071px) and (max-width: 1390px) {
            .dhl-one h6 {
                top: -50%;
            }
            .dhl-one span {
                bottom: -9%;
            }
            .strong {
                font-size: 128%;
            }
            .di {
                height: 13px;
            }
            .qd {
                width: 30%;
            }
        }
    </style>

</head>

<body>
    <div class="xxl">
        <ul>
            <li><img src="img/jpg.15.png" alt=""><span>老师非常的牛逼，拿奖拿到手软</span></li>
            <li><img src="img/jpg.16.png" alt=""><span>我们的老师，以前服务过多个BTA高管</span></li>
            <li><img src="img/jpg.17.png" alt=""><span>这些老师大多来自清华北大的教授</span></li>
            <li><img src="img/jpg.18.png" alt=""><span>选择放心，价格十分的便宜，建议选择</span></li>
            <li><img src="img/jpg.19.png" alt=""><span>全程无推销，来自全国的细心调查</span></li>
            <li><img src="img/jpg.15.png" alt=""><span>清华毕业的，确实值得我们放心</span></li>
            <li><img src="img/jpg.18.png" alt=""><span>选择放心，价格十分的便宜，建议选择</span></li>
        </ul>
    </div>
    <script>
        var xxl = document.querySelector('.xxl')
        var xxl_ul = xxl.querySelector('ul')

        function animate(obj, target) {
            obj.timer = setInterval(function () {
                if (obj.offsetLeft > -2950) {

                    obj.style.left = obj.offsetLeft + -3 + 'px';

                } else {
                    obj.style.left = 0;
                }

            }, 30);
        }
        animate(xxl_ul, 20)


    </script>
    <div class="box">

        <div class="timer">
            <div class="tm"></div>
            <div class="wai">
                <div class="dhl-one">
                    <span>×</span>
                    <h6>请选择沟通时间</h6>
                </div>
                <script>
                    var dhl_one = document.querySelector('.dhl-one')
                    dhl_one.children[0].addEventListener('click', function () {
                        timer.style.display = 'none';
                    })
                </script>
                <div class="dhl-two">
                    <div class="dhl-three">
                        <div class="w-one">
                            <div class="m-one">
                                <span class="strong">周六</span>
                                <span>08-29</span>
                                <span class="di"></span>
                            </div>

                            <div class="m-one">
                                <span class="strong">周日</span>
                                <span>08-30</span>
                                <span class="di"></span>
                            </div>

                            <div class="m-one">
                                <span class="strong">周一</span>
                                <span>08-31</span>
                                <span class="di"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <script>
                    var strong = document.querySelectorAll('.strong')
                    var di = document.querySelectorAll('.di')
                    var shi = 0;
                    var m_one = document.querySelectorAll('.m-one')
                    for (var i = 0; i < m_one.length; i++) {
                        m_one[i].addEventListener('click', function () {

                            for (var i = 0; i < m_one.length; i++) {
                                m_one[i].children[0].style.fontWeight = 'normal';
                            }

                            this.children[0].style.fontWeight = '700';
                            for (var i = 0; i < m_one.length; i++) {
                                m_one[i].children[2].style.borderBottom = '0' + ' ' + 'solid' + ' ' + 'transparent';
                            }
                            this.children[2].style.borderBottom = '3.5px' + ' ' + 'solid' + ' ' + 'rgb(102, 101, 101)'
                            shi = this.children[1].innerText;
                            
                        })
                        
                    }
                </script>
            </div>
            <ul>
                <li><span>12:00~13:00</span><span>可预约</span></li>
                <li><span>13:00~14:00</span><span>可预约</span></li>
                <li><span>14:00~15:00</span><span>可预约</span></li>
            </ul>
            <ul>
                <li><span>15:00~16:00</span><span>可预约</span></li>
                <li><span>16:00~17:00</span><span>可预约</span></li>
                <li><span>17:00~18:00</span><span>可预约</span></li>
            </ul>
            <ul>
                <li><span>18:00~19:00</span><span>可预约</span></li>
                <li><span>19:00~20:00</span><span>可预约</span></li>
                <li><span>20:00~21:00</span><span>可预约</span></li>
            </ul>

            <div class="qd">
                <div class="qd-min"><span>确定</span></div>
            </div>
        </div>


        <script>
            var timer = document.querySelector('.timer');
            var qd = timer.querySelector('.qd');
            var form = document.querySelector('#form')
            var lis = timer.querySelectorAll('li');
            for (var i = 0; i < lis.length; i++) {

                lis[i].addEventListener('click', function (event) {

                    for (var i = 0; i < lis.length; i++) {
                        lis[i].style.backgroundColor = '#3694f8';

                    }
                    this.style.backgroundColor = 'hsl(113, 85%, 43%)';
                    for (var i = 0; i < lis.length; i++) {
                        lis[i].children[1].innerHTML = '可预约';
                    }
                    this.children[1].innerHTML = '已选择';
                    qd.addEventListener('click', function () {
                        timer.style.display = 'none';

                        form.value ='2020-' +shi +'  '+ event.target.parentNode.children[0].innerText.substr('0', '11');
                        
                    })
                })

            }

        </script>
        <script>
            var 
        </script>
        <div class="top">
            <div class="left">
                <img src="img/jpg.1.png" alt="">
                <div class="span">
                    <div class="zi">严格保险专家为您服务</div>
                    <div class="wen"> &nbsp;</div>
                </div>
            </div>
            <div class="right" id="img">
                <ul>
                    <li> <img src="img/jpg.2.png" alt=""></li>
                    <li> <img src="img/jpg.14.png" alt=""></li>
                    <li> <img src="img/jpg.13.png" alt=""></li>
                    <li> <img src="img/jpg.2.png" alt=""></li>
                </ul>
            </div>
            <script>

                var img = document.querySelector('#img')
                var img_ul = img.querySelector('ul')
                var sp = 25;
                img_ul.timer = setInterval(function () {
                    // if (sp <= 75) {
                    //     img_ul.style.transition = '.6s'

                    //     img_ul.style.transform = 'translateX' + '(' + -sp + '%' + ')';
                    //     sp = sp + 25;
                    //     // img_ul.style.left = img_ul.offsetLeft + -400 + 'px';
                    // } else {
                    //     sp = 25;
                    // }
                    switch (sp) {
                        case 25: img_ul.style.transition = '.4s'
                            img_ul.style.transform = 'translateX' + '(' + -sp + '%' + ')';
                            sp = sp + 25;
                            break;
                        case 50: img_ul.style.transition = '.4s'
                            img_ul.style.transform = 'translateX' + '(' + -sp + '%' + ')';
                            sp = sp + 25;
                            break;
                        case 75: img_ul.style.transition = '.4s'
                            img_ul.style.transform = 'translateX' + '(' + -sp + '%' + ')';
                            sp = sp + 25;

                            break;
                        default:
                            img_ul.style.transition = 'none'
                            sp = 25;

                    }
                    // while(sp = 75) {
                    //     img_ul.style.transition = 'none'
                    // }
                }, 3000);
            </script>
        </div>
        <div class="center">
            <div class="center-top">
                <div class="xianshi">
                    <span class="one">￥299</span>
                    <span class="two">限时免费</span>
                    <span class="there">目前剩 <span class="numb">9</span> 个名额</span>
                </div>
                <script>
                    var numb = document.querySelector('.numb')
                    var n = 9;
                    numb.timer = setInterval(function () {
                        if (n > 0) {
                            n--;
                            numb.innerHTML = n;
                        } else {
                            n = 0;
                            numb.innerHTML = n;
                        }
                    }, 6000);
                </script>
                <div class="input">
                    <div class="input-main">
                        <span>*姓名</span>
                        <input type="text" placeholder="请输入您的姓名">
                    </div>
                </div>
                <div class="input">
                    <div class="input-main">
                        <span>*手机号</span>
                        <input type="text" placeholder="请输入您的手机号">
                    </div>
                </div>
                <div class="input" style="cursor: pointer;">
                    <div class="input-main" id="time-s">
                        <span>*沟通时间</span>
                        <input type="text" placeholder="选择时间 >" style="cursor: pointer; color: #0e6fd6;" id="form">
                    </div>
                    <script>
                        var time_s = document.querySelector('#time-s')
                        var form = document.querySelector('#form')
                        time_s.addEventListener('click', function () {
                            timer.style.display = 'block';
                        })

                    </script>
                </div>
                <div class="lingqus">
                    <div class="lingqu">立即领取 &nbsp;<span class="fen">00</span> </div>
                </div>
                <script>
                    var lingqu = document.querySelector('.lingqu');
                    var s = 1;
                    lingqu.timer = setInterval(function () {
                        if (s == 1) {
                            lingqu.style.transition = '.4s';
                            lingqu.style.transform = 'scale' + '(' + .95 + ',' + .95 + ')'
                            // lingqu.style.width = 64 + 'vw';
                            // lingqu.style.height = 18.5 + 'vw';
                            // lingqu.style.fontSize = 4.5 + 'vw';
                            // lingqu.style.borderRadius = 12 + 'vw';
                            s += 1;
                        } else {
                            lingqu.style.transition = '.3s';
                            lingqu.style.transform = 'scale' + '(' + 1.05 + ',' + 1.05 + ')'
                            // lingqu.style.width = 62 + 'vw';
                            // lingqu.style.height = 17 + 'vw';
                            // lingqu.style.fontSize = 4 + 'vw';
                            // lingqu.style.borderRadius = 10 + 'vw';
                            s -= 1;
                        }
                    }, 400);

                    var fen = document.querySelector('.fen');
                    var m = 10;  //分
                    var ss = 00;  //秒
                    // var miao = document.querySelector('.miao');

                    // var inputTime = +new Date('2020-8-25 15:10:00');
                    countDown();//先调用一次，防止刷新留空白
                    setInterval(function () { countDown() }, 1000);
                    function countDown() {
                        // var nowTime = +new Date();

                        // var times = (inputTime - nowTime) / 1000; //times是剩余时间总的毫秒数
                        // var m = parseInt(times / 60 % 60); //分
                        // m = m < 10 ? '0' + m : m;
                        // fen.innerHTML = m;
                        // var s = parseInt(times % 60); //秒
                        // s = s < 10 ? '0' + s : s;
                        // miao.innerHTML = s;
                        if (m < 10 && ss < 10) {
                            fen.innerHTML = '0' + m + ':' + 0 + ss;
                        } else if (m < 10, ss > 10) {
                            fen.innerHTML = '0' + m + ':' + ss;
                        } else if (m > 10, ss > 10) {
                            fen.innerHTML = m + ':' + ss;
                        } else if (m > 10, ss < 10) {
                            fen.innerHTML = m + ':' + 0 + ss;
                        }
                        if (m == 0 && ss == 0) {
                            m = 00;
                            ss = 00;
                        } else if (m >= 0) {
                            if (ss > 0) {
                                ss--;
                            } else if (ss == 0) {
                                m--;
                                ss = 59;
                            }
                        }

                    }
                </script>
                <div class="xingxi">
                    <div class="tt">
                        <img src="img/jpg.3.png" alt=""> &nbsp;&nbsp;
                        <div class="smk">
                            <ul>
                                <li><span style="color: rgb(102, 101, 101);"> 李*名 183****3421</span>
                                    <span> &nbsp;&nbsp;&nbsp;13分钟前已领取</span></li>
                                <li><span style="color: rgb(102, 101, 101);"> 张*飞 174****9780</span>
                                    <span> &nbsp;&nbsp;&nbsp;32分钟前已领取</span></li>
                                <li><span style="color: rgb(102, 101, 101);"> 关*羽 199****5676</span>
                                    <span> &nbsp;&nbsp;&nbsp;41分钟前已领取</span></li>
                                <li><span style="color: rgb(102, 101, 101);"> 刘*备 123****9532</span>
                                    <span> &nbsp;&nbsp;&nbsp;51分钟前已领取</span></li>
                                <li><span style="color: rgb(102, 101, 101);"> 吕*布 162****7541</span>
                                    <span> &nbsp;&nbsp;&nbsp;11分钟前已领取</span></li>
                                <li><span style="color: rgb(102, 101, 101);"> 马*超 125****6768</span>
                                    <span> &nbsp;&nbsp;&nbsp;17分钟前已领取</span></li>
                                <li><span style="color: rgb(102, 101, 101);"> 黄*忠 168****3455</span>
                                    <span> &nbsp;&nbsp;&nbsp;20分钟前已领取</span></li>
                                <li><span style="color: rgb(102, 101, 101);"> 赵*云 192****5433</span>
                                    <span> &nbsp;&nbsp;&nbsp;19分钟前已领取</span></li>
                                <li><span style="color: rgb(102, 101, 101);"> 周*瑜 157****8785</span>
                                    <span> &nbsp;&nbsp;&nbsp;13分钟前已领取</span></li>
                                <li><span style="color: rgb(102, 101, 101);"> 典*韦 153****4324</span>
                                    <span> &nbsp;&nbsp;&nbsp;18分钟前已领取</span></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <script>
                    var smk = document.querySelector('.smk')
                    var smk_ul = smk.querySelector('ul')
                    var spd = 10;
                    smk_ul.timer = setInterval(function () {
                        if (spd <= 90) {
                            smk_ul.style.transition = '.6s'

                            smk_ul.style.transform = 'translateY' + '(' + -spd + '%' + ')';
                            spd = spd + 10;
                            // img_ul.style.left = img_ul.offsetLeft + -400 + 'px';
                        }
                        else {
                            smk_ul.style.transition = 'none'
                            spd = 0;
                        }
                    }, 3000)
                </script>
                <div class="img-one">
                    <img src="img/jpg.5.png" alt="">
                </div>
                <div class="img-two">
                    <img src="img/jpg.5.png" alt="">
                </div>
            </div>
            <div class="center-bottom">
                <div class="top-floot">
                    <img src="img/jpg.8.png" alt="">
                </div>
                <div class="bottom">
                    <div class="bag">
                        <div class="min">
                            <div class="kk" style="margin-bottom: 0;">
                                <span>01</span>
                                <p>家庭财产风险分析</p>
                            </div>
                            <div class="kk" style="margin-bottom: 0;">
                                <span>02</span>
                                <p>量身定制保障方案</p>
                            </div>
                        </div>
                        <div class="min">
                            <div class="kk">
                                <span>03</span>
                                <p>货比千家,只挑合适</p>
                            </div>
                            <div class="kk">
                                <span>04</span>
                                <p>已经有保单的分析</p>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="floot">
            <div class="lj-1">
                <img src="img/jpg.5.png" alt="">
            </div>
            <div class="lj-2">
                <img src="img/jpg.5.png" alt="">
            </div>
            <div class="left">
                <img src="img/jpg.11.png" alt="">
            </div>
            <div class="right">
                <div class="p">
                    <span>银保监<br>会备案</span>
                </div>
                <div class="q">
                    <span>不属于任何<br>保险公司</span>
                </div>
                <div class="j">
                    <span>严选<br>老师通过率<br>不足1%</span>
                </div>

                <div class="m">
                    <span>服务人<br>数超1万人</span>
                </div>
                <div class="n">
                    <span>协助理赔<br>款近亿元</span>
                </div>
            </div>
            <div class="tiaokuan">
                <span>· 服务承诺：不推销不误导、不满意负责到底</span>
            </div>
        </div>
        <div class="floot-min">
            <img src="img/jpg.12.png" alt="">
        </div>
    </div>
</body>

</html>